import { Skeleton, Divider} from 'antd';
import style from "./Skeleton.module.scss";

export default ()=>{
    const active = true;
    return (
        <div className={style["SkeletonBox"]}>
            <div className={style["sellerinfo-box"]}>
            <div>
                <Skeleton.Avatar active={active} style={{width:"50px",height:"50px",borderRadius:"50%"}} shape="default" />
            </div>
            <div>
                <Skeleton.Button active={active} style={{width:"200px",borderRadius:"5px"}} size="small" shape="default"  />
                <p></p>
                <Skeleton.Button active={active} style={{width:"240px",borderRadius:"5px"}} size="small"  shape="default"  />
            </div>
        </div>

        <div className={style["price-box"]}>
            <Skeleton.Button active={active} style={{width:"240px",borderRadius:"5px"}} size="small"  shape="default"  />
            <p></p>
            <Skeleton.Button active={active} style={{width:"290px",borderRadius:"5px"}} size="small" shape="default"  />
        </div>

        <div className={style["ditails-box"]}>
            <div>
            <Skeleton.Image style={{width:"120px",height:"120px"}} />
            <Skeleton.Image style={{width:"120px",height:"120px"}} />
            </div>
            <div>
                <Skeleton.Button active={active} style={{width:"240px",borderRadius:"5px"}} size="small"  shape="default"  />
                <p></p>
                <Skeleton.Button active={active} style={{width:"270px",borderRadius:"5px"}} size="small"  shape="default"  />
                </div>
            <Divider />
            <div>
                <Skeleton.Button active={active} style={{width:"240px",borderRadius:"5px"}} size="small"  shape="default"  />
                <p></p>
                <Skeleton.Button active={active} style={{width:"270px",borderRadius:"5px"}} size="small"  shape="default"  />
                </div>
            </div>
        </div>
    )
}